<template>
<div>
  <RouterView />
  <div class="bottomBasePan" v-if="showBottom" >
      <div style="height:60px;" ></div>
      <div class="bottomPan" >
        <div class="menuItem" @click="toPath('/')" :class="BottomIndex==0? 'menuItemTive' : ''"  >
          <div style="height:5px;" ></div>
          <div class="iconPan" >
            <smile-outlined />
          </div>
          <div class="txtPan" >主页</div>
        </div>
        <div class="menuItem" @click="toPath('/my')" :class="BottomIndex==1? 'menuItemTive' : ''" >
          <div style="height:5px;" ></div>
          <div class="iconPan" >
            <user-outlined />
          </div>
          <div class="txtPan" >我的</div>
        </div>
      </div>
    </div>
</div>
</template>

<script>
import { defineComponent, computed, watch, ref } from 'vue';
import { SmileOutlined, UserOutlined } from '@ant-design/icons-vue';
import { useSystemStoreOut } from '@/store/modules/bottomMenu';
import { useRoute, useRouter } from "vue-router"
import { bottomMenuPath } from "@/utils/cacheEnum"
export default defineComponent({
  name: 'App',
  components:{
    SmileOutlined,
    UserOutlined
  },
  setup(){
    const showBottom=ref(true);
    const route = useRoute();
    const router = useRouter();
    watch(
        () => route.path,
        (val) => {
            if (bottomMenuPath.indexOf(val) >-1) {
                showBottom.value = true
            } else {
                showBottom.value = false
            }
        }
    )
    const systemStore = useSystemStoreOut();
    const BottomIndex = computed(() => systemStore.getBottomIndex);
    const toPath = (path)=>{
      router.replace({
          path: path,
      });
    };
    return {
      BottomIndex,
      showBottom,
      toPath
    }
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.bottomBasePan{
  .bottomPan{
    width: 100%;
    height: 60px;
    border: solid 1px rgb(241, 243, 244);
    background-color: #ffffff;
    position: fixed;
    bottom: 0px;
    display: flex;
    flex-direction: row;
    .menuItemTive{
      .iconPan{
        font-weight: bold;
      }
      .txtPan{
        font-weight: bold;
      }
    }
    .menuItem{
      border: solid 1px rgb(241, 243, 244);
      width: 50%;;
      .iconPan{
        width: 25px;
        height: 25px;
        margin: 0 auto;
        font-size: 18px;
        text-align: center;
      }
      .txtPan{
        width: 100%;
        height: 30px;
        margin: 0 auto;
        text-align: center;
        font-size: 15px;
      }
    }
  }
}
</style>
